<html>
	<head>

		<script type="text/javascript">

		
		
		function extract(html)
		{
			var mails = html.split(' ');
			for(var i =0; i < mails.length;i++)
			{				
				var output = document.getElementById('output');
				var mail = mails[i].split('@')		        
				var text = mail[0]+",";			
				var dotIndex = mail[1].lastIndexOf('.');
				text = text + mail[1].substring(0,dotIndex)+",";
				text = text + mail[1].substring(dotIndex+1,mails[1].length-1)+";";

				var p = document.createElement("p");
				var nodeText = document.createTextNode(text);
				p.appendChild(nodeText);
				output.appendChild(p);
			};
		}

		function onClick()
		{
			  var html = 'example@gmail.com example1@yahoo.com example2@dir.com example3@abv.com';
			  extract(html);			  		     
		}
		</script>
		<title></title>
	</head>
	<body>
		
		<p>
			example@gmail.com example1@yahoo.com example2@dir.com example3@abv.com
		</p>
		<button onclick="onClick()" id="buttonOne">Parse</button>
		<p>
			Output
		</p>
		<div id="output"></div>
	</body>
</html>